import React, { useEffect, useState } from "react";
import { FamilyLifeS } from "@/api/Home";
import { Swiper, Image } from "antd-mobile";
import style from "./FamilyLife.module.scss";

const FamilyLife = () => {
  // 接收请求回来的数据
  const [FamilyLifeArr, setFamilyLifeArr] = useState<any>({});

  // 发送请求获取数据
  useEffect(() => {
    FamilyLifeS().then((res) => {
      if (res.status === 200) {
        setFamilyLifeArr(res.data.data);
      }
    });
  }, []);

  // 轮播数据
  const BannerArr = Object.entries(FamilyLifeArr)
    .splice(0, 1)
    .map((val) => val[1]) // 把轮播需要的数据映射出来
    .flat() // 转成一维数组
    .map((val: any) => {
      return val.bannerList;
    })
    .flat();

  // 循环轮播图数据
  const newBannerArr = BannerArr.map((val: any, idx) => {
    return (
      <Swiper.Item key={idx}>
        <Image src={val.picUrl} />
      </Swiper.Item>
    );
  });

  return (
    <div style={{ backgroundColor: "#EEEEEE" }}>
      {/* 轮播图 */}
      <Swiper autoplay loop style={{ marginBottom: 10 }}>
        {newBannerArr}
      </Swiper>
      {/* 商品数据 */}
      {FamilyLifeArr.categoryItemList &&
        FamilyLifeArr.categoryItemList.map((val: any, idx: number) => {
          return (
            <div className={style.main} key={idx}>
              <div>
                <span className={style.span_1}>{val.category.name}</span>
                <span className={style.span_2}>{val.category.name}</span>
              </div>
              <div className={style.main_bottom}>
                <div
                  style={{
                    display: "flex",
                    flexWrap: "wrap",
                    flexShrink: 0,
                  }}
                >
                  {val.itemList.map((val: any) => {
                    return (
                      <Image
                        src={val.listPicUrl}
                        key={val.listPicUrl}
                        width={180}
                      />
                    );
                  })}
                </div>
              </div>
            </div>
          );
        })}
    </div>
  );
};

export default FamilyLife;
